<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 律师档案管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>



        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    class="handle-del mr10"
                    @click="handleEdit('add')"
                >添加</el-button>

                <el-select v-model="query.lawyerType" placeholder="律师类型" class="handle-select mr10" >
                    <el-option key="1" label="律师" value="律师"></el-option>
                    <el-option key="2" label="兼职律师" value="兼职律师"></el-option>
                </el-select>
                <el-input v-model="query.qDate" placeholder="职业年限" class="handle-input mr10" style='width: 200px;'></el-input>

                <el-select v-model="query.businessSpecialty" placeholder="业务特长类别" class="handle-select mr10" style='width: 130px'>
                    <el-option key="0" label="请选择" value=""></el-option>
                    <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
                    <el-option key="2" label="民事案件" value="民事案件"></el-option>
                    <el-option key="3" label="行政案件" value="行政案件"></el-option>
                    <el-option key="4" label="经济案件" value="经济案件"></el-option>
                </el-select>

                <el-input v-model="query.lawyerName" placeholder="姓名" class="handle-input mr10" style='width: 200px;'></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <template>
                    <download-excel
                        class="export-excel-wrapper"
                        :data="this.tableData"
                        :fields="json_fields"
                        :header="title"
                        name="律师信息.xls"
                    >
                        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                        <el-button type="success">导出</el-button>
                    </download-excel>
                </template>
            </div>
<!-- 表格-->
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="lawyerId" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="lawyerName" label="律师姓名"></el-table-column>

                <el-table-column prop="phoneNumber" width='180px' label="电话"></el-table-column>
                <el-table-column prop="email" width='180px' label="律师邮箱"></el-table-column>
                <el-table-column prop="lawyerType" label="律师类型"></el-table-column>

                <el-table-column prop="isEmployed" label="是否在职"></el-table-column>
                <el-table-column prop="isPartner" width='100px' label="是否合伙人"></el-table-column>

                <el-table-column label="代理案件" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="contractsDetail('contract', scope.row)"
                        >曾代理案件</el-button>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="240" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="contractsDetail('lawyer', scope.row)"
                        >律师详细</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            class='info'
                            @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>


<!--        添加弹出框-->
        <div class="app-container" >
            <el-dialog title="添加律师" :visible.sync="addDialogVisible" width="60%" >
                <div style="max-height: 500px; overflow-y: auto;">
                <el-form ref="form" :model="form" :rules="rules" label-width="105px" size='mini'>
                    <el-row>
                        <el-col :span="12">
<!--                            <el-form-item label="律师 ID" prop="lawyerId">-->
<!--                                <el-input v-model="form.lawyerId"></el-input>-->
<!--                            </el-form-item>-->
                            <el-form-item label="律师姓名" prop="lawyerName">
                                <el-input v-model="form.lawyerName"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="gender">
                                <el-select v-model="form.gender" placeholder="请选择">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="民族" prop="ethnicity">
                                <el-input v-model="form.ethnicity"></el-input>
                            </el-form-item>
                            <el-form-item label="出生日期" prop="birthDate">
                                <el-date-picker v-model="form.birthDate" type="date"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="毕业院校" prop="graduationInstitution">
                                <el-input v-model="form.graduationInstitution"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="专业" prop="major">
                                <el-input v-model="form.major"></el-input>
                            </el-form-item>
                            <el-form-item label="学历" prop="educationLevel">
                                <el-input v-model="form.educationLevel"></el-input>
                            </el-form-item>
                            <el-form-item label="政治面貌" prop="politicalStatus">
                                <el-input v-model="form.politicalStatus"></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号" prop="idCardNumber">
                                <el-input v-model="form.idCardNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="电话号码" prop="phoneNumber">
                                <el-input v-model="form.phoneNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="form.email"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="执业证号" prop="practiceLicenseNumber">
                                <el-input v-model="form.practiceLicenseNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="取得资格日期" prop="qualificationDate">
                                <el-date-picker v-model="form.qualificationDate" type="date"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="业务特长" prop="businessSpecialty">
                                <el-input v-model="form.businessSpecialty"></el-input>
                            </el-form-item>
                            <el-form-item label="是否合伙人" prop="isPartner">
                                <el-radio-group v-model="form.isPartner">
                                    <el-radio label="是">是</el-radio>
                                    <el-radio label="否">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="聘用日期" prop="hireDate">
                                <el-date-picker v-model="form.hireDate" type="date"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="律师类型" prop="lawyerType">
                                <el-select v-model="form.lawyerType" placeholder="请选择">
                                    <el-option label="律师" value="律师"></el-option>
                                    <el-option label="兼职律师" value="兼职律师"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="兼职工作单位" prop="partTimeWorkUnit">
                                <el-input v-model="form.partTimeWorkUnit"></el-input>
                            </el-form-item>
                            <el-form-item label="是否代表或委员" prop="isDeputyOrMember">
                                <el-radio-group v-model="form.isDeputyOrMember">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="受过的奖励" prop="rewards">
                                <el-input v-model="form.rewards"></el-input>
                            </el-form-item>
                            <el-form-item label="受过的处分" prop="punishments">
                                <el-input v-model="form.punishments"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="是否在职" prop="isEmployed">
                                <el-radio-group v-model="form.isEmployed">
                                    <el-radio label="是">是</el-radio>
                                    <el-radio label="否">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="备注" prop="remarks">
                                <el-input v-model="form.remarks"></el-input>
                            </el-form-item>
                            <el-form-item label="一寸照片"  prop="imageUrl1">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:8889/upload/img"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess1"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl1!=''" :src="imageUrl1" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon">上传图片</i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="身份证正面"  prop="imageUrl2">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:8889/upload/img"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess2"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl2!=''" :src="imageUrl2" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon">上传图片</i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="身份证反面"  prop="imageUrl3">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:8889/upload/img"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess3"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl3!=''" :src="imageUrl3" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon">上传图片</i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="律师资格证"  prop="imageUrl4">
                                <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:8889/upload/img"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess4"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl4!=''" :src="imageUrl4" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon">上传图片</i>
                                </el-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>
            </el-dialog>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog :title="编辑" :visible.sync="editVisible" width="30%" >
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" size='mini'>
                <el-form-item label="律师姓名" prop='lawyerName'>
                    <el-input v-model="form.lawyerName"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop='phoneNumber'>
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop='email'>
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="是否在职" prop='phoneNumber'>
                    <el-radio v-model="radio1" label="1">在职</el-radio>
                    <el-radio v-model="radio1" label="2">离职</el-radio>
                </el-form-item>
                <el-form-item label="是否合伙人" prop='phoneNumber'>
                    <el-radio v-model="radio2" label="1">是</el-radio>
                    <el-radio v-model="radio2" label="2">否</el-radio>
                </el-form-item>


                <el-form-item label="律师类型" prop='roleId'>
                    <el-select v-model="form.lawyerType"  placeholder="请选择">
                        <el-option key="1" label="律师" value="律师"></el-option>
                        <el-option key="2" label="兼职律师" value="兼职律师"></el-option>
                    </el-select>

                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
<!--        详情面板-->
        <el-dialog title="详情" :visible.sync="detailVisible" width="50%" height='60%' >
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item  v-for='item in Lawyercase':key='item.caseId' :title="item.caseName" name="1" >
                <el-descriptions direction="vertical" :column="4" border>
                    <el-descriptions-item label="案件类型">{{ item.caseType }}</el-descriptions-item><br/>
                    <el-descriptions-item label="代理类型">{{ item.representationType }}</el-descriptions-item><br/>
                    <el-descriptions-item label="状态">{{ item.status }}</el-descriptions-item><br/>
                    <el-descriptions-item label="结果">{{ item.result }}</el-descriptions-item>
                </el-descriptions>
            </el-collapse-item>
            <p>总共案件：{{this.totalCase}}条</p>     <p>胜诉：{{victoryCase}}条</p>     <p>败诉：{{faildCase}}条</p>  <p>调节：{{talkCase}}条</p>
        </el-collapse>
        </el-dialog>
<!--        律师详情-->
        <el-dialog title="律师详情" :visible.sync="lawyerVisible" width="50%" height='80%' :model='form' >
            <el-descriptions title="" direction="vertical" :column="5" border>
                <el-descriptions-item label="律师 ID">{{ form.lawyerId }}</el-descriptions-item>
                <el-descriptions-item label="律师姓名">{{ form.lawyerName }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ form.gender }}</el-descriptions-item>
                <el-descriptions-item label="民族">{{ form.ethnicity }}</el-descriptions-item>
                <el-descriptions-item label="出生日期">{{ form.birthDate }}</el-descriptions-item>
                <el-descriptions-item label="毕业院校">{{ form.graduationInstitution }}</el-descriptions-item>
                <el-descriptions-item label="专业">{{ form.major }}</el-descriptions-item>
                <el-descriptions-item label="学历">{{ form.educationLevel }}</el-descriptions-item>
                <el-descriptions-item label="政治面貌">{{ form.politicalStatus }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ form.idCardNumber }}</el-descriptions-item>
                <el-descriptions-item label="电话号码">{{ form.phoneNumber }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ form.email }}</el-descriptions-item>
                <el-descriptions-item label="执业证号">{{ form.practiceLicenseNumber }}</el-descriptions-item>
                <el-descriptions-item label="取得资格日期">{{ form.qualificationDate }}</el-descriptions-item>
                <el-descriptions-item label="业务特长">{{ form.businessSpecialty }}</el-descriptions-item>
                <el-descriptions-item label="是否合伙人">{{ form.isPartner }}</el-descriptions-item>
                <el-descriptions-item label="聘用日期">{{ form.hireDate }}</el-descriptions-item>
                <el-descriptions-item label="律师类型">{{ form.lawyerType }}</el-descriptions-item>
                <el-descriptions-item label="兼职工作单位">{{ form.partTimeWorkUnit }}</el-descriptions-item>
                <el-descriptions-item label="是否代表或委员">{{ form.isDeputyOrMember }}</el-descriptions-item>
                <el-descriptions-item label="受过的奖励">{{ form.rewards }}</el-descriptions-item>
                <el-descriptions-item label="受过的处分">{{ form.punishments }}</el-descriptions-item>
                <el-descriptions-item label="是否在职">{{ form.isEmployed }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ form.remarks }}</el-descriptions-item>
                <el-descriptions-item label="一寸照片">
                    <img :src='form.oneInchPhoto' style='width: 150px;height: 80px'>
                </el-descriptions-item>
                <el-descriptions-item label="身份证正面"> <img :src='form.idCardFront' style='width: 150px;height: 80px'></el-descriptions-item>
                <el-descriptions-item label="身份证反面"> <img :src='form.idCardBack' style='width: 150px;height: 80px'></el-descriptions-item>
                <el-descriptions-item label="职业资格证"> <img :src='form.professionalQualificationCertificate' style='width: 150px;height: 80px'></el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>

<script>
import { getLawyersByCondition } from "../../api/lawyer";
import {getRoles} from "../../api/role"
import { editLawyer } from '../../api/lawyer';
import { addLawyer } from '../../api/lawyer';
import {reSetPassword} from '../../api/user'
import {selectCase} from '../../api/lawyer'
import {selectLawyerName} from '../../api/lawyer'
import {selectVictoryCase} from '../../api/lawyer'
import {selectFaildCase} from '../../api/lawyer'
import {selectTalkCase} from '../../api/lawyer'
export default {
    name: 'lawyer',
    data() {
        return {
            totalCase:"",
            victoryCase:"",
            faildCase:"",
            talkCase:"",


            //案件数组
            Lawyercase:[],


            activeNames: ['1'],
            //编辑框单选按钮
            radio1:'1',
            radio2:'2',

            /*条件查询*/
            query: {
                lawyerName: '',
                lawyerType:'',
                qDate:'',
                businessSpecialty:'',
                // userType:"",
                page: 1,
                pageSize: 5
            },


            tableData: [],//查询的表格数据
            pageTotal: 0,//总条数


            multipleSelection: [],//复选框选中的数据
            delList: [], //批量删除的ids

            addDialogVisible:false,//添加
            lawyerVisible:false,//律师详情
            detailVisible:false,//案件详情
            editVisible: false, //修改
            form: {
                lawyerId: null,
                lawyerName: '',
                gender: null,
                ethnicity: '',
                birthDate: '',
                graduationInstitution: '',
                major: '',
                educationLevel: '',
                politicalStatus: '',
                idCardNumber: '',
                phoneNumber: '',
                email: '',
                practiceLicenseNumber: '',
                qualificationDate: '',
                businessSpecialty: '',
                isPartner: null,
                hireDate: '',
                lawyerType: '',
                partTimeWorkUnit: '',
                isDeputyOrMember: null,
                rewards: '',
                punishments: '',
                isEmployed: null,
                remarks: '',
                oneInchPhoto: '',
                idCardFront: '',
                idCardBack: '',
                professionalQualificationCertificate: ''

            },//提交表单后数据放在form里，添加或修改的表单数据
            json_fields:{
                "ID":'lawyerId',
                "律师姓名":'lawyerName',
                "电话":'phoneNumber',
                "律师邮箱":'email',
                "律师类型":'lawyerType',
                "是否在职":'isEmployed',
                "是否合伙人":'isPartner'
            },//导出Excel格式

            title:"添加",
            roles:[],


            rules:{
                lawyerName: [
                    { required: true, message: '律师姓名必填', trigger: 'blur' },
                    { max: 50, message: '律师姓名长度不能超过 50 个字符', trigger: 'blur' }
                ],
                // 电话必填且符合电话号码格式
                phoneNumber: [
                    { required: true, message: '电话必填', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
                ],
                // 邮箱必填且符合邮箱格式
                email: [
                    { required: true, message: '邮箱必填', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                // 身份证号必填且长度为 18 位
                idCardNumber: [
                    { required: true, message: '身份证号必填', trigger: 'blur' },
                    { len: 18, message: '身份证号应为 18 位', trigger: 'blur' }
                ],
                lawyerType: [
                    { required: true, message: '律师类型必填', trigger: 'blur' }
                ],
                isPartner: [
                    { required: true, message: '是否合伙人必填', trigger: 'change' }
                ],
                // 是否在职必填
                isEmployed: [
                    { required: true, message: '是否在职必填', trigger: 'change' }
                ]
            },


            idx: -1,//弹框时告诉修改/删除第几行
            id: -1,
            imageUrl1:"",
            imageUrl2:"",
            imageUrl3:"",
            imageUrl4:""
        };
    },
    created() {
        this.getData();
    },
    methods: {
        //图片回显
        handleAvatarSuccess1(res, file) {
            console.log(res)
            this.imageUrl1 = res.data
            sessionStorage.setItem("imgUrl1",this.imageUrl1)
            // alert(this.imageUrl)
        },handleAvatarSuccess2(res, file) {
            console.log(res)
            this.imageUrl2 = res.data
            sessionStorage.setItem("imgUrl2",this.imageUrl2)
            // alert(this.imageUrl)
        },handleAvatarSuccess3(res, file) {
            console.log(res)
            this.imageUrl3 = res.data
            sessionStorage.setItem("imgUrl3",this.imageUrl3)
            // alert(this.imageUrl)
        },handleAvatarSuccess4(res, file) {
            console.log(res)
            this.imageUrl4 = res.data
            sessionStorage.setItem("imgUrl4",this.imageUrl4)
            // alert(this.imageUrl)
        },
        //图片上传大小限制
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        //导出excel
        /*extract() {
            console.log(this.$refs.multipleTable);
        },*/
        //折叠面板
        handleChange(val) {
            console.log(val);
        },
        //重置密码
        resetPsd(index, row) {
            // 二次确认删除
            this.$confirm('确定要重置密码为123456吗', '提示',{
                type:'warning'
            })
                .then(()=>{

                        reSetPassword(row.userId).then(res=>{
                            if(res.code=200) {
                                this.$message.success("密码已重置为123456")
                            }
                            else{
                                this.$message.error("密码重置失败")
                            }
                        })
                    }

                )
                .catch(() => {});
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            console.log(this.query)
            getLawyersByCondition(this.query).then(res=>{
                console.log(res);
                if(res.code == 200) {
                    this.tableData = res.data;
                    // console.log(this.tableData)
                    this.pageTotal = res.pageTotal || 50;
                }
                else {
                    this.$message.error(res.msg);
                }
            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            for(let i = 0;i < this.multipleSelection.length;i++) {
                this.delList.push(this.multipleSelection[i].userId);
            }
            console.log(this.delList)
            // const length = this.multipleSelection.length;
            delUser(this.delList).then(res=>{
                console.log(res);
                if(res.code==200) {
                    this.$message.success('批量删除成功');
                    this.getData();
                }else{
                    this.$message.error('批量删除失败');
                }
            })
        },
        //详情操作
        contractsDetail(ope,row) {
            if(ope == 'contract'){
                this.detailVisible = true;
                console.log(row.lawyerName);

                //total总数
                selectCase(row.lawyerName).then(res=>{
                    if(res.code==200) {
                        console.log("总条数",res);
                        this.totalCase = res.data
                    }
                })
                //该律师下的案件
                selectLawyerName(row.lawyerName).then(res=>{
                    console.log("案件信息",res);
                    this.Lawyercase = res.data
                })
                selectVictoryCase(row.lawyerName).then(res=>{
                    console.log(res);
                    if(res.code==200) {
                        console.log("胜诉",res);
                        this.victoryCase = res.data
                    }
                })
                selectFaildCase(row.lawyerName).then(res=>{
                    if(res.code==200) {
                        console.log("败诉",res);
                        this.faildCase = res.data
                    }
                })
                selectTalkCase(row.lawyerName).then(res=>{
                    if(res.code==200) {
                        console.log("调节",res);
                        this.talkCase = res.data
                    }
                })


            }else {
                this.lawyerVisible = true;
                this.form={...row}
            }

        },
        // 编辑操作
        handleEdit(ope, row) {
            if(ope == 'add') {
                this.addDialogVisible = true;
                // console.log(this.form);
            }else {
                getRoles().then(res=>{
                    if(res.code == 200) {
                        this.roles = res.data;
                    }else {
                        this.$message.error(res.msg)
                    }
                })
                this.title = "编辑";
                this.form = { ...row };
                this.editVisible = true;
            }

        },
        // 保存编辑
        saveEdit() {
            this.$refs.form.validate(valid => {
                if(valid) {
                    if(this.title == '编辑') {
                        // console.log(this.form);
                        editLawyer(this.form).then(res=>{
                            if(res.code==200) {
                                this.$message.success("修改成功")
                                this.editVisible = false;
                                this.getData();
                            }else {
                                this.$message.error("修改失败")
                            }

                        })
                    }else{//添加
                        this.form.oneInchPhoto = sessionStorage.getItem("imgUrl1");
                        this.form.idCardFront = sessionStorage.getItem("imgUrl2");
                        this.form.idCardBack = sessionStorage.getItem("imgUrl3");
                        this.form.professionalQualificationCertificate = sessionStorage.getItem("imgUrl4");
                        addLawyer(this.form).then(res=>{
                            if(res.code==200) {
                                this.$message.success("添加成功")
                                this.addDialogVisible = false;
                                this.getData();
                            }else {
                                this.$message.error("添加失败")
                            }
                        })
                    }
                }else{
                    this.$message.error('请输入正确的信息')
                    return false;
                }
            })
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

/deep/ .el-upload {
     display: inline-block;
     text-align: center;
     cursor: pointer;
     outline: 0;
     width: 300px;
     height: 100px;
 }
.export-excel-wrapper{
    display: inline-block;
    margin-left: 5px;
}
/*/deep/ .el-upload {*/
/*    display: inline;*/
/*    text-align: center;*/
/*    cursor: pointer;*/
/*    outline: 0;*/
/*}*/

/*/deep/ .upload-demo {*/
/*    display: inline;*/
/*}*/
.avatar{
    width: 100%;
    height: 100%;
}
</style>
